<template>
  <div class="jd">
    <div class="jd-header">
      <div class="jd-classify">
        <router-link to="/Classify">
          <div class="iconfont icon-fenlei"></div>
        </router-link>
      </div>
      <div class="jd-search" @click="goSearch">
        <input class="search-inp" type="text" />
        <div class="iconfont icon-jingdong"></div>
      </div>
      <div class="jd-login">
        <router-link to="/User">
          <span class="login">{{ lgc ? lgc : "登录" }}</span>
        </router-link>
      </div>
    </div>
    <div class="commodity-display">
      <div class="jd-swiper">
        <van-swipe :autoplay="3000" indicator-color="red">
          <van-swipe-item
            class="vant-swiper"
            v-for="(image, index) in imageList"
            :key="index"
          >
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="jd-grid">
        <van-grid class="van-grid" :border="false" :column-num="5">
          <van-grid-item v-for="(item, index) in gridList" :key="index">
            <a :href="item.a">
              <van-image :src="item.img" />
            </a>
            <div class="item-info">{{ item.info }}</div>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="jd-seckill">
        <div class="seckill-tip">京东秒杀:<span>不知道几点场</span></div>
        <!-- 倒计时 -->
        <div class="count-down">
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{
                timeData.hours > 10 ? timeData.hours : "0" + timeData.hours
              }}</span>
              <span class="colon">:</span>
              <span class="block">{{
                timeData.minutes > 10
                  ? timeData.minutes
                  : "0" + timeData.minutes
              }}</span>
              <span class="colon">:</span>
              <span class="block">{{
                timeData.seconds > 10
                  ? timeData.seconds
                  : "0" + timeData.seconds
              }}</span>
            </template>
          </van-count-down>
        </div>
        <div class="more-to-buy">
          <a
            href="https://h5.m.jd.com/babelDiy/Zeus/28ku5QZs2VMePfoUFhP28xdQkd25/index.html?babelChannel=ttt2"
            >爆款轮番秒</a
          >
        </div>
        <div class="seckill-merchandise">
          <ul>
            <li
              v-for="(item, index) in merchandiseList"
              :key="index"
              @click="goDetails(item.goodsId)"
            >
              <lazy-component>
                <img v-lazy="item.goodsImg" />
                <span>￥{{ item.goodsPrice }}</span>
              </lazy-component>
            </li>
            <li class="merchandise-back">
              <i class="iconfont icon-fanhui"></i>查看全部
            </li>
          </ul>
        </div>
      </div>
      <!-- 商品展示 -->
      <div>
        <van-list
          class="goods-show"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了哦"
          @load="onLoad"
          offset="20"
        >
          <div
            class="goods-item"
            @click="goDetails(item.goodsId)"
            v-for="(item, index) in goodsList"
            :key="index"
          >
            <lazy-component>
              <img v-lazy="item.goodsImg" />
              <div class="item-info">
                <div class="goods-info">{{ item.goodsName }}</div>
                <div class="goods-price">￥{{ item.goodsPrice }}</div>
              </div>
            </lazy-component>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>
<script>
import { searchAllGoods } from "@axios/service";
export default {
  data() {
    return {
      imageList: [
        "https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/73474/7/21652/349890/636a50bdEb37908f5/894d1b653fb2574f.png!cr_1053x420_4_0",
        "https://m15.360buyimg.com/mobilecms/jfs/t1/71380/37/18054/111614/62905589Ef54034bf/060466b9b02e1b04.jpg!cr_1125x449_0_166!q70.jpg",
        "https://m15.360buyimg.com/mobilecms/jfs/t1/202427/10/19165/79024/6364e231Eee350f0b/14d93deeb36a67cd.jpg!cr_1125x449_0_166!q70.jpg",
        "https://imgcps.jd.com/ling4/10064456792402/5LyR6Zey5pe25YWJ/5paH5Lu25pS257qz5aW95biu5omL/p-61b4d6c915fcd8697b55f126/07c3f8bd/cr_1053x420_4_0/s/q70.jpg",
        "https://m15.360buyimg.com/mobilecms/jfs/t1/109939/30/32603/143390/636cbd68E5cdc48ef/d0b9677e58a811de.jpg!cr_1125x449_0_166!q70.jpg",
        "https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/75570/1/17836/107887/633429caE3c0375df/9caf9778d4615104.jpg!cr_1053x420_4_0!q70.jpg",
        "https://m15.360buyimg.com/mobilecms/jfs/t1/105812/22/28713/60406/636ccbfdE6d0b0650/4a3e25244f6b74a4.jpg!cr_1125x449_0_166!q70.jpg",
      ],
      gridList: [
        {
          a: "https://h5.m.jd.com/babelDiy/Zeus/4JkCVz6z5RB4dBL7bZBwtGRiBLLw/index.html?hideTabbar=true",
          img: "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png",
          info: "京东超市",
        },
        {
          a: "https://pro.m.jd.com/mall/active/8tHNdJLcqwqhkLNA8hqwNRaNu5f/index.html",
          img: "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png",
          info: "数码电器",
        },
        {
          a: "https://h5.m.jd.com/babelDiy/Zeus/2mPT6i3AsiqRcsZPKSya8Atva2f7/index.html",
          img: "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png",
          info: "京东新百货",
        },
        {
          a: "https://pro.m.jd.com/mall/active/4P9a2T9osR9JvtzHVaYTPvsecRtg/index.html",
          img: "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png",
          info: "京东生鲜",
        },
        {
          a: "https://daojia.jd.com/html/index/index.html?channel=jdapp",
          img: "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png",
          info: "京东到家",
        },
        {
          a: "https://prodev.m.jd.com/mall/active/N2p5dHzdwxnAqp182PVJmc5L5Se/index.html",
          img: "https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png",
          info: "充值缴费",
        },
        {
          a: "https://pro.m.jd.com/mall/active/ZfpVC9DA985pfN3XYTj8CnJcELS/index.html",
          img: "https://m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png",
          info: "附近号店",
        },
        {
          a: "https://coupon.m.jd.com/center/getCouponCenter.action",
          img: "https://m15.360buyimg.com/mobilecms/jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png",
          info: "领卷",
        },
        {
          a: "https://plogin.m.jd.com/login/nopasswordcu?appid=300&returnurl=https%3A%2F%2Fwq.jd.com%2Fpassport%2FLoginRedirect%3Fstate%3D2856057097%26returnurl%3Dhttps%253A%252F%252Fplus.m.jd.com%252Findex&source=wq_passport",
          img: "https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png",
          info: "PLUS会员",
        },
        {
          a: "https://pro.m.jd.com/mall/active/3YvKJrc4e4WK7aZ46j3h5UMCvEn4/index.html",
          img: "https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png",
          info: "京东国际",
        },
      ],
      firstnum: 0,
      lastnum: 20,
      merchandiseList: [],
      goodsList: [],
      loading: false,
      finished: false,
      time: 30 * 60 * 60 * 1000,
      lgc: "",
    };
  },
  methods: {
    onLoad() {
      this.getAllGoods();
      this.loading = false;
      // 数据全部加载完成
      if (this.goodsList.length >= 100) {
        this.finished = true;
      }
    },
    goSearch() {
      this.$router.push("/Search");
    },
    async getAllGoods() {
      let { status, data } = (await searchAllGoods()) || {};
      if (status != 200) return false;
      this.firstnum = this.firstnum + 20;
      this.lastnum = this.lastnum + 20;
      let arr = data?.list.splice(this.firstnum, this.lastnum);
      this.goodsList.push(...arr);
    },
    async getSomeGoods() {
      let { status, data } = await searchAllGoods();
      if (status != 200) return false;
      this.merchandiseList = data.list.splice(0, 15);
    },
    goDetails(id) {
      this.$router.push({
        path: "/Details",
        query: {
          id: id,
        },
      });
    },
  },
  mounted() {
    this.getSomeGoods();
    this.getAllGoods();
    this.lgc = JSON.parse(localStorage.getItem("lgc"));
  },
};
</script>
<style lang="less" scoped>
@import "@styles/index.less";
.jd {
  .w(375);
  .jd-header {
    .wh(375,44);
    background: @bgc;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    z-index: 1;
    .jd-classify {
      .wh(40,44);
      .icon-fenlei {
        .padding(0,0,0,5);
        color: #fff;
        .fs(28);
        .lh(44);
      }
    }
    .jd-search {
      flex: 1;
      display: flex;
      align-items: center;
      position: relative;
      .search-inp {
        .wh(260,30);
        border-radius: 10px;
        outline: 0;
        border: 0;
      }
      .icon-jingdong {
        position: absolute;
        color: @bgc;
        .left(10);
        .fs(20);
      }
    }
    .jd-login {
      .wh(60,44);
      text-align: center;
      .padding(0,5,0,0);
      .login {
        .fs(15);
        .lh(44);
        color: #fff;
      }
    }
  }

  .commodity-display {
    position: relative;
    .wh(375, 607);
    overflow-x: hidden;
    overflow-y: scroll;
    .jd-swiper {
      .wh(350,140);
      position: absolute;
      .top(44);
      .left(12);
      .vant-swiper {
        .wh(350,140);
        img {
          .wh(350,140);
        }
      }
    }
    .jd-swiper:after {
      .wh(375,100);
      position: absolute;
      top: 0;
      left: 0;
      .left(-12);
      z-index: -1;
      content: "";
      border-radius: 0 0 30% 30%;
      background: @bgc;
    }
    .jd-grid {
      position: absolute;
      .top(190);
      .van-grid {
        .wh(375,162);
        .item-info {
          .fs(10);
          .wh(75,18);
          .lh(20);
          color: gray;

          text-align: center;
        }
        /deep/.van-grid-item {
          .h(70);
          .w(75);
          .van-image__img {
            .wh(40,40);
          }
        }
      }
    }
    .jd-seckill {
      position: relative;
      .wh(355,135);
      .margin(350,0,0,10);
      overflow: hidden;
      background: #f6f6f6;
      border-radius: 20px;
      .seckill-tip {
        .fs(14);
        .wh(160,20);
        .padding(10,0,5,10);
        span {
          .fs(12);
          color: gray;
        }
      }
      .count-down {
        position: absolute;
        .left(160);
        .top(0);
        .wh(100,35);
        .lh(35);
        /deep/.van-count-down {
          .margin(5,0,0,0);
          .colon {
            display: inline-block;
            margin: 0 4px;
            color: @bgc;
          }
          .block {
            display: inline-block;
            width: 22px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            background-color: @bgc;
          }
        }
      }
      .more-to-buy {
        a {
          color: @bgc;
        }
        .fs(12);
        position: absolute;
        .right(20);
        .top(10);
      }
      .seckill-merchandise {
        .h(100);
        overflow-x: scroll;
        ul {
          display: flex;
          li {
            .wh(55,77);
            .padding(10,10,0,0);
            img {
              .wh(55,55);
            }
            span {
              color: @bgc;
              .padding(5,0,0,0,);
            }
          }
          .merchandise-back {
            .w(20);
            color: @bgc;
            .iconfont icon-fanhui {
              .fs(16);
            }
          }
        }
      }
    }
    .goods-show {
      display: flex;
      flex-wrap: wrap;
      background: #f7f7f7;
      .goods-item {
        display: flex;
        flex-direction: column;
        .margin(5,10,10,10);
        border-radius: 20px;
        img {
          .wh(160,160);
        }
        .item-info {
          .goods-info {
            .w(160);
            .padding(0,0,0,5);
            display: -webkit-box;
            /* 将对象的元素在垂直方向排布 */
            -webkit-box-orient: vertical;
            /* 在第几行中显示省略号 */
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .goods-price {
            .fs(20);
            color: @bgc;
          }
        }
      }
    }
  }
}
</style>
